<script setup lang="ts">
/**
 * @desc UserTaskMultiInstance
 * @author DragonTeam <https://www.bpmport.com>
 * @since 2024/10/31 15:14
 */

import { Rows3 } from 'lucide-vue-next'
import type { PropType } from 'vue'
import { computed } from 'vue'
import type { BaseNode } from '@/types'
import type { ComparisonOperator, CompletionConditionType } from '@/configuration/enums'
import { approvalMethodOptions, comparisonOperatorOptions, completionConditionTypeOptions } from '@/configuration/enums'

defineOptions({ name: 'UserTaskMultiInstance' })

const $props = defineProps({
  node: {
    type: Object as PropType<BaseNode>,
    required: true,
  },
})
const doEmit = defineEmits(['update:node'])
const vModelNode = computed<BaseNode>({
  get: () => $props.node,
  set: val => doEmit('update:node', val),
})

const approvalMethod = computed<number>({
  get: () => vModelNode.value.businessData?.approvalMethod as number,
  set: val => vModelNode.value.businessData.approvalMethod = val,
})

const completionConditionType = computed<CompletionConditionType>({
  get: () => vModelNode.value.businessData?.completionConditionType as CompletionConditionType,
  set: val => vModelNode.value.businessData.completionConditionType = val,
})
const completionConditionCompare = computed<ComparisonOperator>({
  get: () => vModelNode.value.businessData?.completionConditionCompare as ComparisonOperator,
  set: val => vModelNode.value.businessData.completionConditionCompare = val,
})
const completionConditionNum = computed<number>({
  get: () => vModelNode.value.businessData?.completionConditionNum as number,
  set: val => vModelNode.value.businessData.completionConditionNum = val,
})
const completionConditionExpression = computed<string>({
  get: () => vModelNode.value.businessData?.completionConditionExpression as string,
  set: val => vModelNode.value.businessData.completionConditionExpression = val,
})

function clearCompletionCondition() {
  vModelNode.value.businessData.completionConditionType = undefined
  vModelNode.value.businessData.completionConditionCompare = undefined
  vModelNode.value.businessData.completionConditionNum = undefined
  vModelNode.value.businessData.completionConditionExpression = undefined
}
function resetCompletionCondition(val) {
  vModelNode.value.businessData.completionConditionExpression = undefined
  if (val === 'number' || val === 'percentage') {
    vModelNode.value.businessData.completionConditionCompare = '=='
    if (val === 'number') {
      vModelNode.value.businessData.completionConditionNum = 1
    }
    else {
      vModelNode.value.businessData.completionConditionNum = 100
    }
  }
}
</script>

<template>
  <a-collapse-item key="UserTaskMultiInstance">
    <template #header>
      <Rows3 :size="16" />
      多人审批
    </template>

    <EditItem label="审批方式">
      <template #tooltip>
        <div>会签：需要指定数量或者百分比的人员审批通过</div>
        <div>或签：只需要一次审批通过</div>
      </template>

      <clearable-radio-group v-model="approvalMethod" :options="approvalMethodOptions" @change="clearCompletionCondition" />
    </EditItem>

    <EditItem v-if="approvalMethod === 2" label="通过条件">
      <a-radio-group
        v-model="completionConditionType" type="button"
        @change="resetCompletionCondition"
      >
        <a-radio v-for="i in completionConditionTypeOptions" :key="i.label" :value="i.value">
          {{ i.label }}
        </a-radio>
      </a-radio-group>

      <a-input-group v-if="completionConditionType === 'number' || completionConditionType === 'percentage'">
        <a-select
          v-model="completionConditionCompare"
          size="mini"
          style="width: 120px"
        >
          <a-option v-for="i in comparisonOperatorOptions" :key="i.value" :value="i.value">
            {{ i.label }}
          </a-option>
        </a-select>
        <a-input-number
          v-model="completionConditionNum"
          style="flex: 1"
          :min="1"
          :step="1"
          :max="completionConditionType === 'percentage' ? 100 : 1000"
          model-event="input"
        />
        <a-button v-show="completionConditionType === 'percentage'" type="secondary" disabled>
          %
        </a-button>
      </a-input-group>

      <a-input
        v-if="completionConditionType === 'expression'"
        v-model="completionConditionExpression"
      />
    </EditItem>
  </a-collapse-item>
</template>
